<template>
    <div id="div">
        <mt-header title="我是标题" fixed>
            <mt-button slot="left" icon="back" >返回</mt-button>
            <mt-button slot="right" icon="more"></mt-button>
        </mt-header>

        <p v-bind:class="colors1">{{test}}</p>
        <button @click="doClickNavBar()">点击我加一</button>
        <button class="mint-button mint-button--default mint-button--large">
            <label class="mint-button-text">点击弹出 Toast</label>
        </button>


        <div class="page-popup">
            <div class="page-popup-wrapper">
                <button class="mint-button mint-button--default mint-button--large"
                        v-on:click="handleClick1()"><!----> <label
                        class="mint-button-text">中部弹出 popup</label></button>
                <button class="mint-button mint-button--default mint-button--large"><!----> <label
                        class="mint-button-text">上侧弹出 popup</label></button>
                <button class="mint-button mint-button--default mint-button--large"><!----> <label
                        class="mint-button-text">右侧弹出 popup</label></button>
                <button class="mint-button mint-button--default mint-button--large"><!----> <label
                        class="mint-button-text">下侧弹出 popup</label></button>
            </div>
            <mt-popup
                    v-model="popupVisible"
                    popup-transition="popup-fade" class="mint-popup mint-popup-1"><h1>popup</h1>
                <p>/ ˈpɑpˌʌp /</p>
                <p>n. 弹出式; [棒]内野飞球; 自动起跳式装置</p>
                <p>adj. 弹起的; 有自动起跳装置的</p></mt-popup>
        </div>

        <el-radio v-model="radio" label="1">备选项</el-radio>
        <el-radio v-model="radio" label="2">备选项</el-radio>
    </div>
</template>

<script>


    export default {
        props: {},
        data(){
            return {
                a: 1,
                b: 1,
                navside_hover: false,
                popupVisible: false,
                radio: '1',
            }
        },
        methods: {
            changeTitle: function () {
                return this.a++;
            },
            doClickNavBar: function () {
                this.navside_hover = !this.navside_hover;
            },
            handleClick1: function () {
                this.popupVisible = !this.popupVisible;
            }
        },
        computed: {
            test: function () {
                return this.a + this.b;
            },
            colors1: function () {
                return {
                    navside_hover: this.navside_hover,
                }
            }
        }
    }
</script>


<style scoped>

</style>
